<template>
  <div class="flex">
    <template v-if="type === 'datetimerange'">
      <span class="fs-16 mr-8 cr-hui1 bold" style="flex-shrink: 0" v-if="title"
        >{{ name }}：</span
      >
      <el-date-picker
        :clearable="false"
        v-model="timeValue"
        class="dark-input"
        :type="type"
        :picker-options="options"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="center"
        popper-class="dark-time-picker"
        @input="datePickerChange"
      ></el-date-picker>
    </template>
    <template v-if="type === 'date'">
      <el-date-picker
        :clearable="false"
        v-model="dataValue"
        class="dark-input"
        :type="type"
        placeholder="请选择日期"
        :picker-options="timetype?optionsday:optionslastday"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="center"
        popper-class="dark-time-picker"
        @input="datePickerChange"
      ></el-date-picker>
    </template>
    <template v-if="type === 'month'">
      <el-date-picker
        :clearable="false"
        v-model="monthValue"
        class="dark-input"
        :type="type"
        placeholder="请选择月份"
        :picker-options="optionsday"
        value-format="yyyy-MM"
        align="center"
        popper-class="dark-time-picker"
        @input="datePickerChange"
      ></el-date-picker>
    </template>
  </div>
</template>

<script>
export default {
  name: "Time",
  props: {
    value: {
      type: [Array, Date, String],
      default: () => {
        return [
          new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
          new Date(),
        ];
      },
    },
    title: {
      type: Boolean,
      default: true,
    },
    name: {
      type: String,
      default: "选择日期",
    },
    type: {
      type: String,
      default: () => "datetimerange",
    },
    timetype: {
      type: Boolean,
      default: true,
    },
    optionsday: {
      type: Object,
      default: () => {
        return {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        };
      },
    },
    optionslastday: {
      type: Object,
      default: () => {
        return {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
        };
      },
    },
    optionsMonth: {
      type: Object,
      default: () => {
        return {
          disabledDate(time) {
            return time.getTime() > Date.now() - 30 * 3600 * 24 * 1000;
          },
        };
      },
    },
    options: {
      type: Object,
      default: () => {
        return {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      timeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      dataValue: "",
      monthValue: "",
    };
  },
  watch: {
    value(val) {
      switch (this.type) {
        case "datetimerange":
          this.timeValue = val;
          break;
        case "date":
          this.dataValue = val;
          break;
        case "month":
          this.monthValue = val;
          break;
      }
    },
  },
  methods: {
    datePickerChange(val) {
      this.$emit("valueChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.dark-input {
  height: 26px;
  line-height: 26px;
  margin-right: 30px;
}
</style>
